import type { ThemeConfig } from '@/stores/interface'
import { getLightColor, getDarkColor } from '@/utils/color'
import { tabsHeightEnum, dialogFooterHeightEnum } from '@/utils/sizeEnum'
import { filterEnum } from '@/utils'

export const useThemeStore = defineStore(
  'theme',
  () => {
    // 主题配置
    const themeConfig = reactive<ThemeConfig>({
      name: '阳洋出行',
      componentSize: 'default',
      isCollapse: false,
      mapType: 'GaoDe',
      colorPrimary: '#409EFF', //element-plus默认
      colorInfo: '#909399', //element-plus默认
      colorSuccess: '#67C23A', //element-plus默认
      colorWarning: '#E6A23C', //element-plus默认
      colorDanger: '#F56C6C' //element-plus默认
    })

    /** 更新主题配置 */
    const updateThemeConfig = (form: Partial<ThemeConfig>) => {
      Object.keys(form).forEach((key) => {
        if (themeConfig.hasOwnProperty(key)) {
          ;(themeConfig as any)[key] = form[key as keyof ThemeConfig]
        }
      })
    }
    /** 加载主题 */
    const loadTheme = () => {
      updateThemeColorVar('primary', themeConfig.colorPrimary)
      updateThemeColorVar('success', themeConfig.colorSuccess)
      updateThemeColorVar('warning', themeConfig.colorWarning)
      updateThemeColorVar('danger', themeConfig.colorDanger)
      updateThemeColorVar('info', themeConfig.colorInfo)
      // Primary Text
      setStyleProperty('--el-text-color-primary', '#212225')
      // Regular Text
      setStyleProperty('--el-text-color-regular', '#575A60')
      // Placeholder Text
      setStyleProperty('--el-text-color-placeholder', '#8B8F97')

      loadSize()
    }
    /** 加载布局大小 */
    const loadSize = () => {
      // 布局 Tabs 高度
      setStyleProperty(
        '--layout-tabs-height',
        filterEnum(themeConfig.componentSize, tabsHeightEnum, { label: 'value', value: 'label' })
      )
      // 布局文字大小 small: 12px, default: 14px, large: 14px
      setStyleProperty(
        '--layout-font-size',
        themeConfig.componentSize === 'small' ? '12px' : '14px'
      )
      // 布局card间隙 margin
      setStyleProperty(
        '--layout-card-spacing',
        themeConfig.componentSize === 'small' ? '10px' : '20px'
      )
      // 布局 footer 高度
      setStyleProperty(
        '--layout-footer-height',
        themeConfig.componentSize === 'small' ? '40px' : '50px'
      )
      // c-dialog底部高度
      setStyleProperty(
        '--c-dialog-footer-height',
        filterEnum(themeConfig.componentSize, dialogFooterHeightEnum, {
          label: 'value',
          value: 'label'
        })
      )
    }
    /** 设置css变量 */
    const setStyleProperty = (propName: string, value: string) => {
      document.documentElement.style.setProperty(propName, value)
    }
    /** 更新主题颜色变量 */
    const updateThemeColorVar = (name: string, color: string) => {
      setStyleProperty(`--el-color-${name}`, color)
      setStyleProperty(`--el-color-${name}-dark-2`, `${getDarkColor(color, 0.3)}`)
      for (let i = 1; i <= 9; i++) {
        //element-plus实际用到 3、5、7、8、9
        const primaryColor = `${getLightColor(color, i / 10)}`
        setStyleProperty(`--el-color-${name}-light-${i}`, primaryColor)
      }
    }

    return {
      themeConfig,
      loadTheme,
      loadSize,
      updateThemeConfig
    }
  },
  {
    persist: true
  }
)
